<template>
    <div class="ip-protection">
      <div class="title">公网暴露</div>
      <div class="line"></div>
  
      <div class="content">
        <el-row>
          <el-col :span="6">
            <div class="section">
              <div class="section-header">
                <div>未保护</div>
              </div>
              <div class="section-content">
                <div class="count">0</div>
                <el-button type="primary" @click="enableProtection">开启保护</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section">
              <div class="section-header">
                <div>已保护</div>
              </div>
              <div class="section-content">
                <div class="count">1</div>
                <el-button type="danger" @click="disableProtection">关闭保护</el-button>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section">
              <div class="section-header">
                <div>可用授权</div>
              </div>
              <div class="section-content">
                <div class="count">999</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 数据模型
      };
    },
    methods: {
      enableProtection() {
        // 开启保护逻辑
        console.log('开启保护');
      },
      disableProtection() {
        // 关闭保护逻辑
        console.log('关闭保护');
      }
    }
  };
  </script>
  
  <style scoped>
  .ip-protection {
    padding: 20px;
  }
  
  .title {
    font-weight: bold;
    font-family: SimSun, '宋体', sans-serif;
    font-size: 30px;
    margin-top: 30px;
    margin-left: 45px;
  }
  
  .line {
    margin-top: 20px;
    margin-left: 45px;
    border-top: 1px solid rgb(203, 190, 190);
    width: 96%;
  }
  
  .section {
    margin-top: 20px;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
    margin-left: 45px;
  }
  
  .section-content {
    display: flex;
    align-items: center;
    margin-left: 45px;
  }
  
  .count {
    font-size: 24px;
    margin-right: 10px;
  }
  </style> 